<template>
	<view class="content-my">
		<view class="item">
			<view class="cri color4">
				<icon class="ic-my iconfont bs-my" type=""></icon>
			</view>
			<text>个人信息</text>
		</view>
		<uv-cell-group class="group">
			<uv-cell title="姓名" :value="myInfo?.name"></uv-cell>
			<uv-cell title="年级" :value="myInfo?.nj"></uv-cell>
			<uv-cell title="学院" :value="myInfo?.xy"></uv-cell>
			<uv-cell title="班级" :value="myInfo?.bj"></uv-cell>
			<uv-cell title="学号" :value="myInfo?.xh"></uv-cell>
			<uv-cell title="电话" :value="myInfo?.phone"></uv-cell>
			<uv-cell title="身份" :value="myInfo?.typetype"></uv-cell>
			<uv-cell v-if="myInfo?.typetype == '实验室管理员'" title="管理实验室" :value="myInfo?.glsysName"></uv-cell>
			<uv-cell v-else-if="myInfo?.typetype == '超级管理员'" title="管理实验室" value="全部"></uv-cell>
		</uv-cell-group>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import db from '@/api/database'

const myInfo = ref()

onShow(() => {
	getUserData()
})

async function getUserData() {
	try {
		const res = await db.collection('grxx').doc(uni.getStorageSync('user')._id).get()
		console.log('查询数据成功:', res.data)
		myInfo.value = res.data[0]
	} catch (error) {
		console.error('查询数据失败:', error)
	}
}
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.05);
		opacity: 0.6;
	}

	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

.content-my {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 30px 0;
	background: linear-gradient(135deg, #ffffff 0%, #d1d6dd 100%);
	position: relative;
	overflow: hidden;

	/* 背景动画圆圈 */
	&::before,
	&::after {
		content: '';
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(45deg, rgba(34, 196, 255, 0.2), rgba(33, 150, 243, 0.2));
		filter: blur(5px);
		z-index: 0;
	}

	&::before {
		width: 300rpx;
		height: 300rpx;
		top: -100rpx;
		right: -50rpx;
		animation: pulse 8s infinite ease-in-out;
	}

	&::after {
		width: 250rpx;
		height: 250rpx;
		bottom: 50rpx;
		left: -100rpx;
		animation: pulse 6s infinite ease-in-out 1s;
	}

	.item {
		margin: 0 0 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		animation: fadeIn 0.5s ease-out;
		position: relative;
		z-index: 1;

		.cri {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 3px;
			box-shadow: 0 4px 10px rgba(72, 211, 207, 0.2);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}
		}

		.color4 {
			background: linear-gradient(135deg, #dbffff, #b5f1ef);
		}

		.ic-my {
			font-size: 30px;
			color: #2196f3;
		}

		text {
			color: #2196f3;
			margin-left: 10px;
			font-size: 18px;
			font-weight: 600;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}
	}

	.group {
		width: 92%;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		background-color: rgba(255, 255, 255, 0.9);
		animation: fadeIn 0.5s ease-out 0.2s both;
		position: relative;

		:deep(.uv-cell) {
			padding: 12px 15px;
			transition: all 0.3s ease;

			&:active {
				background-color: rgba(33, 150, 243, 0.05);
			}

			&:not(:last-child)::after {
				background-color: rgba(33, 150, 243, 0.1);
			}
		}
	}
}
</style>